{% extends 'endbase.html' %}
{% block title %}
	分类管理
{% endblock %}
{% block head %}
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
    <script src="{{ url_for('static',filename='js/addcategory.js') }}"></script>
<style>
    .small-container{
            margin-top: 20px;
            margin-bottom: 20px;
        }
    .upload-box{
        width: 200px;
        height: 200px;
        border: 2px dashed #d3d8df;
        border-radius: 8px;
        cursor: pointer;
        overflow: hidden;
        justify-content: center;
        align-items: center;
        position: relative;
        background-color: whitesmoke;
        display: flex;
    }
    .upload-box:hover{
        border-color: #adbbbf;
        background-color: white;
    }
    .preview-image{
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: none;
    }
    .plus-icon{
        color: #e1d7d7;
        transition: color 0.3s ease;
        font-size: 5rem;
    }
    .upload-box:hover .plus-icon{
        color: #adbbbf;
    }
    .required::after{
        {#content: "*";#}
        color: #00d95a;
        margin-left: 3px;

    }
    a{
        color: #0000cc;
    }

</style>
{% endblock %}

{% block body %}
<div class="container" style="height: 100vh">

    <!-- 放在 HTML 中某个地方（推荐放模态框旁） -->
    <input type="hidden" id="addCategoryUrl" value="{{ url_for('security.add_category') }}">
{#    <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" id="myModalLabel" style="outline: none;text-decoration: none">新增分类</button>#}
    <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" id="openModalBtn" >新增分类</button>

{#    <h4 class="modal-title" id="myModalLabel">新增分类</h4>#}
    <!-- 模态框（Modal） -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close " data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="myModalLabel">新增分类</h4>
                </div>
                <div class="modal-body">
                    <form action="" class="form-horizontal" role="form" method="post" id="addCategoryForm">
                        <div class="form-group">
                            <label for="categoryname" class="control-label col-md-2" >名称</label>
                            <div class="col-md-8">
                                <input type="text" id="categoryname" name="categoryname" class="form-control " placeholder="请输入分类名称">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="picname" class="control-label col-md-2 required">封面</label>
                            <div class="col-md-8">
                                <div class="upload-area">
                                    <input type="file" id="coverUpload" accept="image/*"
                                    style="display: none" onchange="previewImage(this)" name="picname">

                                    <label for="coverUpload" class="upload-box" style="">
                                        <div  class="plus-icon">
                                             <i class="bi bi-plus-lg fs-1"></i>
                                        </div>
                                        <img id="preview" class="preview-image">
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="categorycontent" class="control-label col-md-2" >简介</label>
                            <div class="col-md-8">
                                <textarea  id="categorycontent" name="categorycontent" class="form-control" placeholder="简介 200字以内"></textarea>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                    </button>
                    <button type="button" class="btn btn-primary" onclick="submitCategory()" id="submitcat">
                        确定
                    </button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>

    <div class="categorylist">
            <table class="table table-condensed">
                <thead>
                    <tr>
                        <th class="col-md-1" >封面</th>
                        <th class="col-md-3">名称</th>
                        <th class="col-md-4">简介</th>
                        <th class="col-md-1">博客数</th>
                        <th class="col-md-3 text-center" style="">操作</th>
                    </tr>
                </thead>
                <tbody>
                    {% for category in categories %}
                    <tr>
                        <td>
                            {% if category.cover %}
                            <img src="{{ url_for('static',filename=category.cover) }} " style="width: 100px;height: 100px;">
                            {% else %}
                            <img src="{{ url_for('static',filename='images/1.jpg') }} " style="width: 100px;height: 100px;">
                            {% endif %}
                        </td>
                        <td>
                            <div class="small-container" style="margin-top: 20px;margin-bottom: 20px">
                                <div>{{ category.name }}</div>
                            </div>
                        </td>
                        <td>
                            <div class="small-container">{{category.description}}</div>
                        </td>
                        <td>
                            <div class="small-container">
                                <div>{{ category.blog_count }}</div>
                            </div>
                        </td>
                        <td>
                            <div class="small-container text-center">
                                <a href="javascript:void(0);" onclick="editCategory({{ category.id }},'{{ category.name }}',
                                    '{{ category.description }}','{{ url_for('static',filename=category.cover or 'images/1.jpg') }}')">编辑</a> |
                                <a href="javascript:void(0);" onclick="deleteCategory({{ category.id }})">删除</a> |
                                {% if not loop.first %}
                                <a href="javascript:void(0);" onclick="moveCategory({{ category.id }},'up')" >上移</a> |
                                {% else %}
                                <span class="text-muted">上移</span>  |
                                {% endif %}
                                {% if not loop.last %}
                                <a href="javascript:void(0);" onclick="moveCategory({{ category.id }},'down')" >下移</a>
                                {% else %}
                                <span class="text-muted">下移</span>
                                {% endif %}
                            </div>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>


</div>

{% endblock %}